<template>
  <div class="portrait" v-loading="callbackCount !== 0">
    <!--<div class="link-list">-->
      <!--<router-link :to="'/ad'" >广告推送页面</router-link>-->
    <!--</div>-->
    <div class="back">
      <a @click="$router.go(-1)" ><i class="el-icon-d-arrow-left "></i></a>
    </div>

    <br><br>
    <p class="little-tip"><i class="el-icon-info"></i>数据供应方有5亿人口数据,仅保证有概率性打通</p>
    <div v-show="!!propertyList.length" class="person">
      <p class="tip">人口属性</p>
      <el-card>
        <div class="content">

          <div v-for="(item,index) in propertyList">
            <div class="line" style="position:relative;height:20px;">
              <div class="name">{{item.name}}</div>
              <div class="weight">{{item.weight}} %</div>
            </div>
            <br>
          </div>
          <!--<p v-if="!propertyList.length" class="default-text">暂无数据</p>-->
        </div>
      </el-card>
    </div>
    <div v-show="!!consumeList.length" class="favor">
      <p class="tip">线下消费偏好</p>
      <el-card>
        <div class="content">

          <div v-for="(item,index) in consumeList">
            <div class="line" style="position:relative;height:20px;">
              <div class="name">{{item.name}}</div>
              <div class="weight">{{(item.weight * 10).toFixed(1)}} %</div>
            </div>
            <br>
          </div>
        </div>

      </el-card>
    </div>

    <div v-show="!!alwaysList.length" class="always">
      <p class="tip">常去场所</p>
      <el-card>
        <div class="content">

          <div v-for="(item,index) in alwaysList">
            <div class="line" style="position:relative;height:20px;">
              <div class="name">{{item.name}}</div>
              <div class="weight">{{item.weight}} %</div>
            </div>
            <br>
          </div>
        </div>

      </el-card>
    </div>

    <div v-show="!!deviceList.length" class="device">
      <p class="tip">手机信息</p>
      <el-card>
        <div class="content">
          <template v-for="(item ,index) in deviceList">
            <p class="line"><span class="label">原始机型</span><span class="value">{{item.originModel | showData}}</span></p>
            <p class="line"><span class="label">标准机型</span><span class="value">{{item.standardModel | showData}}</span></p>
            <p class="line"><span class="label">标准品牌</span><span class="value">{{item.standardBrand | showData}}</span></p>
            <p class="line"><span class="label">设备类型</span><span class="value">{{item.deviceType | showData}}</span></p>
            <p class="line"><span class="label">屏幕尺寸</span><span class="value">{{item.screen | showData}}</span></p>
            <p class="line"><span class="label">价格区间</span><span class="value">{{item.price | showData}}</span></p>
            <p class="line"><span class="label">手机功能</span><span class="value">{{item.functionType | showData}}</span></p>
            <p class="line"><span class="label">硬件特性</span><span class="value">{{item.hardwareType | showData}}</span></p>
            <p class="line"><span class="label">品牌中文名称</span><span class="value">{{item.cnBrand | showData}}</span></p>
            <p class="line"><span class="label">上市时间</span><span class="value">{{item.timeTomarket | showData}}</span></p>
          </template>

        </div>

      </el-card>
    </div>
  </div>
</template>

<script>
  import {normalGet, normalPost} from "../../methods2";
  import {checkMac} from "../../methods2/util";

  let remoteHost = 'http://api.gdyunlifang.com',
      xiaofengHost = 'http://192.168.0.250',
      host = remoteHost,
      consumeUrl = host + '/person/portrait/consume/', //消费
      propertyUrl = host + '/person/portrait/demographic/', //人口属性
      alwaysUrl = host + '/person/portrait/resort/', //常去地方
      portraitdeviceUrl = host + '/person/portrait/device/';  //查看设备图像


  export default {
    name: "portraint",
    data() {
      return {
        oriMac: '',
        consumeList: [],
        propertyList: [],
        alwaysList: [],
        deviceList: [],
        callbackCount: 0,
        traceLoading:false,
      }
    },
    mounted() {
      this.oriMac = this.$route.params.mac;
      this.handleSearch();
    },
    computed: {
      mac() {
        return this.oriMac.trim();
      }
    },
    filters:{
      dataShow(v){
        return v || '未知';
      }
    },
    methods: {
      handleSearch() {
        if (!checkMac(this.mac)) {
          this.$message.warning('请输入正确的MAC地址')
          return;
        }

        this.callbackCount = 4;
        this.requestProperty();
        this.requestConsume();
        this.requestAlways();
        this.requestDevice();

      },

      requestProperty() {
        let suc = (data) => {
              this.propertyList = data.data.tags;
            },
            err = () => {
              this.$message.warning('请求个人属性失败，可能是网络有过高的延时...');
            },
            always = () => {
              this.callbackCount--;
            };

        normalGet(propertyUrl + this.mac.replace(/:/g, ':'), '', suc, err, this.$message, always);

      },
      requestConsume() {
        let suc = (data) => {
              this.consumeList = data.data.tags;
            },
            err = () => {
              this.$message.warning('请求消费信息失败，可能是网络有过高的延时...');
            },
            always = () => {
              this.callbackCount--;
            };

        normalGet(consumeUrl + this.mac.replace(/:/g, ':'), '', suc, err, this.$message, always);

      },
      requestAlways() {
        let suc = (data) => {
            this.alwaysList = data.data.tags;
          },
          err = () => {
            this.$message.warning('请求常去场所失败，可能是网络有过高的延时...');
          },
          always = () => {
            this.callbackCount--;
          };

        normalGet(alwaysUrl + this.mac.replace(/:/g, ':'), '', suc, err, this.$message, always);

      },
      requestDevice() {
        let suc = (data) => {
            this.deviceList = data.data.tags;

          },
          err = () => {
            this.$message.warning('请求设备图像失败，可能是网络有过高的延时...');
          },
          always = () => {
            this.callbackCount--;
          };
        normalGet(portraitdeviceUrl + this.mac.replace(/:/g, ':'), '', suc, err, this.$message, always);
      },

    }
  }
</script>

<style scoped lang="scss">
  @import "../../static/style/public";

  .portrait {
    padding-bottom: 100px;
    .link-list{
      display: flex;
      flex-direction: row-reverse;
      padding:10px 0 40px 0 ;
      a{
        margin-left:20px;
        text-decoration: none;
        color: black;
        font-weight: 550;
        &:hover {
          cursor: pointer;
          color: #387cff;
        }
      }
    }

    .back{
      @include flexCenter;
      position:fixed;
      left:0px;
      top:0px;
      padding:0 20px;
      width:50px;
      height:100%;
      i{
        font-size:5rem;
        font-weight:600;
        color:#50bfff;

        &:hover{
          cursor:pointer;
        }
      }
    }

    .little-tip {
      @include tip-icon;
      margin: 20px 0px;
      padding-left: 20px;
      text-align: center;
    }
    .tip{
      padding: 8px 16px;
      background-color: #ecf8ff;
      border-radius: 4px;
      border-left: 5px solid #50bfff;
      margin: 20px 0;
      font-size:24px
    }
    .input-bar {
      display: flex;
      flex-direction: row-reverse;
      .input {
        margin: 0 20px;
        width: 300px;
      }
    }

    .content {
      padding: 20px;
      .line{
        display: flex;
        justify-content: space-between;
        padding:10px;
        border-radius: 8px;
        $lineHeight:20px;
        &:hover{
          //background-color: #6abee6;
        }
        .name {
          font-size:20px;
          font-weight: 550;
          line-height:$lineHeight;
        }
        .weight {
          line-height:$lineHeight;
        }
        .label{
          display: inline-block;
          padding:0 20px;
          width:20%;
          font-size:18px;
          font-weight: 550;
          text-align: right;
          line-height: $lineHeight;
        }
        .value{
          display: inline-block;
          width:60%;
          line-height: $lineHeight;
        }
      }

      .table {
        width: 100%;
        tr {
          padding: 10px 0;
          width: 100%;
          height: 35px;
          text-align: center;
        }
      }
      .default-text{
        font-size:25px;
        font-weight:550;
        text-align: center;
        color: #49a9ff;
      }
    }

  }
  .rubberBand {
    -webkit-animation: rubberBand 1.5s infinite;
    animation: rubberBand 1.5s infinite;
  }

  @-webkit-keyframes rubberBand {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }

    30% {
      -webkit-transform: scaleX(1.25) scaleY(0.75);
      transform: scaleX(1.25) scaleY(0.75);
    }

    40% {
      -webkit-transform: scaleX(0.75) scaleY(1.25);
      transform: scaleX(0.75) scaleY(1.25);
    }

    60% {
      -webkit-transform: scaleX(1.15) scaleY(0.85);
      transform: scaleX(1.15) scaleY(0.85);
    }

    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
    }
  }

  @keyframes rubberBand {
    0% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -ms-transform: scale(1);
    }

    30% {
      -webkit-transform: scaleX(1.25) scaleY(0.75);
      transform: scaleX(1.25) scaleY(0.75);
      -ms-transform: scaleX(1.25) scaleY(0.75);
    }

    40% {
      -webkit-transform: scaleX(0.75) scaleY(1.25);
      transform: scaleX(0.75) scaleY(1.25);
      -ms-transform: scaleX(0.75) scaleY(1.25);
    }

    60% {
      -webkit-transform: scaleX(1.15) scaleY(0.85);
      transform: scaleX(1.15) scaleY(0.85);
      -ms-transform: scaleX(1.15) scaleY(0.85);
    }

    100% {
      -webkit-transform: scale(1);
      transform: scale(1);
      -ms-transform: scale(1);
    }
  }
</style>
